<script setup lang="ts">

const option = {
  title: {
    text: "浙江省大帅B人数分布图",
    subtext: "介绍了各地大帅B人数分布情况",
    sublink:
      "http://zh.wikipedia.org/wiki/%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12",
  },
  tooltip: {
    trigger: "item",
    formatter: "{b}<br/>{c} (p / km2)",
  },
  toolbox: {
    show: true,
    orient: "vertical",
    left: "right",
    top: "center",
    feature: {
      dataView: { readOnly: false },
      restore: {},
      saveAsImage: {},
    },
  },
  visualMap: {
    min: 800,
    max: 50000,
    text: ["High", "Low"],
    realtime: false,
    calculable: true,
    inRange: {
      color: ["lightskyblue", "yellow", "orangered"],
    },
  },
  series: [
    {
      name: "浙江人口密度",
      type: "map",
      map: "ZJ", // 注册的地图名称
      label: {
        show: true,
      },
      data: [
        { name: "温州市", value: 300 },
        { name: "台州市", value: 500 },
        { name: "绍兴市", value: 600 },
        { name: "丽水市", value: 400 },
        { name: "金华市", value: 500 },
        { name: "衢州市", value: 600 },
        { name: "杭州市", value: 700 },
        { name: "湖州市", value: 800 },
        { name: "嘉兴市", value: 900 },
        { name: "舟山市", value: 1000 },
        { name: "宁波市", value: 700 },
      ],
    },
  ],
};
</script>

<template>
  <v-chart :option="option"></v-chart>
</template>

<style scoped>
</style>